import React, { ReactNode } from 'react';
import { Route, Link } from './';
import { LocationDescriptor } from '../history';
import './MenuLink.css'
interface Props {
    to: LocationDescriptor;
    exact?: boolean;
    children?: ReactNode;
}
//会判断地址栏中的路径和自己的to里的路径是否匹配，如果相等，会给Link组件添加一个active的类名
export default (props: Props) => {
  const { to, exact, children } = props;
  return (
    <Route
      path={to}
      exact={exact}
      children={
        //childrenProps 主要包括 location和history两个对象
        //, 另外如果路径匹配上了, childrenProps 会带一个 match 对象属性(这也是为什么要套一层<Route>的原因):↓
        // {params/*{id:'1'}*/, isExact: url === path, path: routePath, /* 你给<Route/>上设置的path属性*/ url /* 当前浏览器URL栏显示的路径*/}
        (childrenProps: any) => (
          <Link className={childrenProps.match ? 'active' : ''}
            to={to} {...childrenProps}>{children}</Link>
        )
      }
    />
  )
}
/**
 * 渲染Route有三种方式
 * component 匹配上渲染，不匹配不渲染
 * render 匹配上渲染，不匹配不渲染
 * children 不管是否匹配都渲染
 */
